import React from "react";
import { Form, Input, Space, Button } from "antd";
import TheUpload from "@/components/TheUpload";
import { apiDynamicLabelEdit, apiDynamicLabelAdd } from '@/request/pet'
import _ from 'lodash'

class Editor extends React.Component {
  state = {
    type: '',
    editorValue: {},
    fileList: [],
    loading: false
  };
  componentDidMount() {
    this.setState({
      type: this.props.type
    })
    if (this.props.editorValue && this.props.type === 'editor') {
      let fileList = [
        {
          uid: this.props.editorValue.labelFilez,
          name: "image",
          url: this.props.editorValue.labelFilez,
        },
      ]
      this.setState({
        editorValue: this.props.editorValue,
        fileList
      }, () => {
        this.formRef.setFieldsValue({
          labelName: this.props.editorValue.labelName,
          labelFilez: this.props.editorValue.labelFilez,
        })
      })
    }
  }
  getFileResult = (value) => {
    if (value.length && value[0] && value[0].response) {
      this.formRef.setFieldsValue({ labelFilez: value[0].response.data });
    } else {
      this.formRef.setFieldsValue({ labelFilez: '' });
    }
  };
  onFinish = async (value) => {
    this.setState({
      loading: true
    })
    if (this.state.type === 'editor') {
      let res = await apiDynamicLabelEdit({ ...value, labelId: this.state.editorValue.labelId })
      if (res.code === 0) {
        this.setState({
          loading: false
        })
        this.props.handleCancel()
        React.$message({
          type: 'info',
          content: '修改成功'
        })
        this.props.reload()
      }
    }
    if (this.state.type === 'add') {
      let res = await apiDynamicLabelAdd({ ...value })
      if (res.code === 0) {
        this.setState({
          loading: false
        })
        this.props.handleCancel()
        React.$message({
          type: 'info',
          content: '新增成功'
        })
        this.props.reload()
      }
    }
  }
  render() {
    const { fileList, type, loading } = this.state
    return (
      <div>
        <Form ref={ref => this.formRef = ref} onFinish={this.onFinish}>
          <Form.Item label={'名称'} rules={[{ required: true }]} name="labelName">
            <Input placeholder="请输入标签标签名称" />
          </Form.Item>
          {
            type === 'editor' && <Form.Item label={'图片'} rules={[{ required: true }]} name="labelFilez">
              <TheUpload
                  isConversion={false}
                  fileList={fileList}
                  maxSize={10}
                  getFileResult={this.getFileResult}
                  len={1}
              />
            </Form.Item>
          }
          {
            type === 'add' && <Form.Item label={'图片'} rules={[{ required: true }]} name="labelFilez">
              <TheUpload
                  isConversion={false}
                  maxSize={10}
                  getFileResult={this.getFileResult}
                  len={1}
              />
            </Form.Item>
          }
          <Form.Item>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <Space>
                <Button onClick={this.props.handleCancel}>取消</Button>
                <Button loading={loading} type="primary" htmlType="submit">保存</Button>
              </Space>
            </div>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Editor;
